<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>工单列表</title>
<link href="${ctx}/statics/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/statics/uimaker/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${ctx}/statics/uimaker/icon.css">
<link rel="stylesheet" href="${ctx}/statics/css/providers1.css">
<link rel="stylesheet" href="${ctx}/statics/css/basic_info.css">
</head>
<body>
	<div class="container">
		<table id="dg" style="width: 100%; height: 529px"
			data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:true,
                pagination:true,
                fitColumns:true,
                striped:false,
                checkOnSelect:true,
                selectOnCheck:true,
                collapsible:true,
                toolbar:'#tb',
                url:'${ctx}/order/page',
				method:'post',
                pageSize:10">
			<thead>
				<tr>
					<th field="ajOrderId" width="140">订单号</th>
					<th field="businessId" width="100" formatter="businessFormatter">商家</th>
					<th field="buyerName" width="100">车主</th>
					<th field="buyerMobile" width="112">手机</th>
					<th field="buyerAddress" width="170">地址</th>
					<th field="buyerCar" width="136">车型</th>
					<th field="createTime" width="120">下单时间</th>
				</tr>
			</thead>
		</table>
		<div id="tb" style="padding: 0 30px;">
			<div class="conditions">
				<span class="con-span">订单号: </span><input id="orderId"
					class="easyui-textbox" type="text" name="orderId"
					style="width: 166px; height: 30px; line-height: 30px;"></input> <span
					class="con-span">手机: </span><input id="mobile"
					class="easyui-textbox" type="text" name="mobile"
					style="width: 166px; height: 30px; line-height: 30px;"></input> <a
					href="javascript:doSearch();" class="easyui-linkbutton"
					iconCls="icon-search" data-options="selected:true">查询</a> <a
					href="javascript:resetSearch()" class="easyui-linkbutton"
					iconCls="icon-reload">重置</a> <a href="#"
					class="easyui-linkbutton more" iconCls="icon-more">更多</a>
			</div>
			<div class="conditions hide">
				<span class="con-span">商家名称: </span> <input id="storeId"
					class="easyui-combobox" style="height: 30px; width: 166px;"
					name="language">
				<!--             <select id="storeId" class="easyui-combobox" name="language" style="height:35px;width:166px;"> -->
				<!--             </select> -->
				<span class="con-span">下单时间: </span><input id="beginTime"
					class="easyui-datebox"
					style="width: 166px; height: 30px; line-height: 30px;">至&nbsp;&nbsp;&nbsp;<input
					id="endTime" class="easyui-datebox"
					style="width: 166px; height: 30px; line-height: 30px;">
			</div>
			<div class="opt-buttons">
				<a href="#" class="easyui-linkbutton add-btn"
					data-options="selected:true">新增</a>
				<a href="#" class="easyui-linkbutton edit-btn"
					data-options="selected:true">编辑</a>
				<a href="#" class="easyui-linkbutton del-btn">删除</a>
				<a href="#" class="easyui-linkbutton excelinput-btn">导入</a>
				<a href="#" class="easyui-linkbutton exceloutput-btn">导出</a>
			</div>
		</div>
	</div>
	<div id="w" class="easyui-dialog" title="工单信息"
		data-options="modal:true,closed:true,buttons:'#dlg-buttons'"
		style="width: 700px; height: 400px; padding: 10px;">
		<div class="container">
			<div class="content">
				<div class="easyui-tabs1" style="width: 100%;">
					<div title="基本信息" data-options="closable:false" class="basic-info">
						<form id="form0" method="post">
							<input type="hidden" name="id"/>
							<table class="kv-table">
								<tbody>
									<tr>
										<td class="kv-label">订单号</td>
										<td class="kv-content"><input id="ajOrderId" name="ajOrderId"
											class="easyui-textbox" type="text" required="true"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
										<td class="kv-label">商家</td>
										<td class="kv-content"><input id="businessId" name="businessId"
											class="easyui-textbox businessSelect" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">车主</td>
										<td class="kv-content" colspan="3"><input id="buyerName" name="buyerName"
											class="easyui-textbox" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">手机</td>
										<td class="kv-content"><input id="buyerMobile" name="buyerMobile"
											class="easyui-textbox" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
										<td class="kv-label">车型</td>
										<td class="kv-content"><input id="buyerCar" name="buyerCar"
											class="easyui-textbox" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">地址</td>
										<td class="kv-content" colspan="3"><input
											id="buyerAddress" name="buyerAddress" class="easyui-textbox" type="text"
											style="width: 332px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">安装产品</td>
										<td class="kv-content" colspan="3"><input
											id="buyerProduct" name="buyerProduct" class="easyui-textbox" type="text"
											style="width: 332px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">备注</td>
										<td class="kv-content" colspan="3"><input
											id="buyerRemark" name="buyerRemark" class="easyui-textbox" type="text"
											style="width: 332px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
								</tbody>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="dlg-buttons">
		<a class="easyui-linkbutton" href="javascript:void(0)"
			onclick="javascript:doAdd()" style="width: 80px" data-options="selected:true">提交</a> <a
			class="easyui-linkbutton" href="javascript:void(0)"
			onclick="javascript:$('#w').dialog('close');" style="width: 80px">取消</a>
	</div>
	<div id="excelModal" class="easyui-dialog" title="Excel导入"
		data-options="modal:true,closed:true,buttons:'#excel-buttons'"
		style="width: 500px; height: 300px; padding: 10px;">
		<div class="container">
			<div class="content">
				<div class="easyui-tabs1" style="width: 100%;">
					<div title="基本信息" data-options="closable:false" class="basic-info">
						<form id="form2" method="post" action="${ctx}/order/excelinput" enctype="multipart/form-data">
							<table class="kv-table">
								<tbody>
									<tr>
										<td class="kv-label">模板</td>
										<td class="kv-content">
											<a href="${ctx}/statics/model/model.xlsx">下载Excel导入的模板文件</a>
										</td>
									</tr>
									<tr>
										<td class="kv-label">商家</td>
										<td class="kv-content">
											<input name="businessId"
											class="easyui-textbox businessSelect" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">请选择上传的Excel</td>
										<td class="kv-content">
											<input class="easyui-filebox" name="file" style="width: 200px; height: 30px; line-height: 30px;" data-options="buttonText:'选择文件',prompt:'请选择Excel文件'"/>
										</td>
									</tr>
								</tbody>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="excel-buttons">
		<a class="easyui-linkbutton excel-submit" href="javascript:void(0)"
		 	style="width: 80px" data-options="selected:true">提交</a> <a
			class="easyui-linkbutton" href="javascript:void(0)"
			onclick="javascript:$('#excelModal').dialog('close');" style="width: 80px">取消</a>
	</div>
	<form id="form1" action="${ctx}/order/exceloutput" method="post">
		<input type="hidden" name="ajOrderId"/>
		<input type="hidden" name="mobile"/>
		<input type="hidden" name="storeId"/>
		<input type="hidden" name="beginTime"/>
		<input type="hidden" name="endTime"/>
	</form>
	<script type="text/javascript" src="${ctx}/statics/js/jquery.js"></script>
	<script type="text/javascript"
		src="${ctx}/statics/js/jquery.easyui.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/statics/js/easyui-lang-zh_CN.js"></script>

	<script type="text/javascript">
		$(function() {
			//
			$('.excel-submit').on('click', function() {
				// validation
				$("#form2").submit();
			});
			
			$('.exceloutput-btn').on('click', function() {
				$('#form1').form('load', {
	    			"ajOrderId":$('#orderId').textbox('getValue'),
	    			"mobile":$('#mobile').textbox('getValue'),
	    			"storeId":$('#storeId').combobox('getValue'),
	    			"beginTime":$('#beginTime').textbox('getValue'),
	    			"endTime":$('#endTime').textbox('getValue')
	    		});
				$('#form1').submit();
			});
			
			$(".excelinput-btn").on('click', function() {
				$("#excelModal").dialog('open');
			});
		});
	
	
	
		var businessJSON;
		var businessFormatter = function(val, row) {
			if (businessJSON) {
				for (var item in businessJSON) {
					if (val == businessJSON[item].id) {
						return businessJSON[item].name;
					}
				}
			} else {
				// 同步
				var result;
				$.ajax({
				    url: "${ctx}/business/list",
				    async:false,
				    cache: false,
				    type:"GET",
				    dataType:"json",
				    data:{},
				    context: document.body,
				    success: function(data){
				    	businessJSON = data;
				    	result = businessFormatter(val, row);
				    }
				});
				return result;
			}
		}
	
		$(function() {
			$('.edit-btn').on('click', function() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$("#w").dialog('open').dialog('setTitle', '工单修改');
					$('#form0').form('load', row);
				} else {
					$.messager.alert('提示','请选择一条数据','info');
				}
			});
			
			$('.del-btn').on('click', function() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$.messager.confirm('提示', '确定删除吗？', function(r) {
						if (r) {
							$.post('${ctx}/order/del', {
								"id":row.id
							}, function(data){
								if (data.result == true) {
									doSearch();
									$.messager.show({
										title: '提示',
										msg: data.msg,
										timeout:5000,
										showType:'slide'
									});
								} else {
									$.messager.alert('错误',data.msg,'error');
								}
							}, 'json');
						}
					});
				} else {
					$.messager.alert('提示','请选择一条数据','info');
				}
			});
		});
    
    	var doAdd = function() {
    		// 1、拿表单里的所有待提交数据
    		// 2、表单校验（略）
    		// 3、ajax提交数据到服务器端
    		
    		$('#form0').form('submit',{
				url: '${ctx}/order/save',
				onSubmit: function(){
					return $(this).form('validate');
				},
				success: function(data){
					$('#form0').form('clear');
					var data = eval('(' + data + ')');
					if (data.result == true) {
						$('#w').dialog('close');
						doSearch();
						$.messager.show({
							title: '提示',
							msg: data.msg,
							timeout:5000,
							showType:'slide'
						});
					} else {
						$.messager.alert('错误',data.msg,'error');
					}
				}
			});
    		
    		
// 			$.post("${ctx}/order/save", {
// 				"ajOrderId":$('#ajOrderId').textbox('getValue'),
// 				"businessId":$('#businessId').combobox('getValue'),
// 				"buyerName":$('#buyerName').textbox('getValue'),
// 				"buyerMobile":$('#buyerMobile').textbox('getValue'),
// 				"buyerCar":$('#buyerCar').textbox('getValue'),
// 				"buyerAddress":$('#buyerAddress').textbox('getValue'),
// 				"buyerProduct":$('#buyerProduct').textbox('getValue'),
// 				"buyerRemark":$('#buyerRemark').textbox('getValue')
// 			}, function(data) {
// 				if (data.result == true) {
// 					$('#w').dialog('close');
// 					doSearch();
// 					$.messager.show({
// 						title: '提示',
// 						msg: data.msg,
// 						timeout:5000,
// 						showType:'slide'
// 					});
// 				} else {
// 					$.messager.alert('错误',data.msg,'error');
// 				}
// 			}, "json");	
    	}
    	
    	var doSearch = function() {
    		$('#dg').datagrid('load',{
    			"ajOrderId":$('#orderId').textbox('getValue'),
    			"mobile":$('#mobile').textbox('getValue'),
    			"storeId":$('#storeId').combobox('getValue'),
    			"beginTime":$('#beginTime').textbox('getValue'),
    			"endTime":$('#endTime').textbox('getValue')
    		});
    	}
    	
    	var resetSearch = function() {
    		$('#orderId').textbox('setValue', '');
    		$('#mobile').textbox('setValue', '');
    		$('#beginTime').textbox('setValue', '');
    		$('#endTime').textbox('setValue', '');
    		//var data = $('#storeId').combobox('getData');
    		$('#storeId').combobox('select', "");
    	}
    
//     	var priceFormatter = function(val, row) {
//     		var num = new Number(val);
//     		num = num.toFixed(2);
//     		return "<span style='color:blue'>" + "￥" + num + "</span>";
//     	}
        
        $(function(){
        	
        	$('.add-btn').on('click', function() {
        		$('#w').dialog('open').dialog('setTitle', '工单新增');
        	});
        	
        	$.getJSON('${ctx}/business/list', {}, function(data) {
        		data.unshift({"id":"", "name":"=请选择="});
        		//alert(JSON.stringify(data));
        		$('#storeId').combobox({
            	    data:data,
            	    valueField:'id',
            	    textField:'name'
            	});
        	});
        	
        	$.getJSON('${ctx}/business/list', {}, function(data) {
        		businessJSON = data;
        		$('.businessSelect').combobox({
        			editable:false,
            	    data:data,
            	    valueField:'id',
            	    textField:'name'
            	});
        		$('.businessSelect').combobox('select', data[0].id);
        	});
        	
        	
        	
            $('#dg').datagrid();
            
            //
            	<c:if test="${not empty successMessage}">
            		$.messager.show({
						title: '提示',
						msg: '${successMessage}',
						timeout:5000,
						showType:'slide'
					});
            	</c:if>
            	<c:if test="${not empty errorMessage}">
	        		$.messager.alert('错误','${errorMessage}','error');
	        	</c:if>
            
            
            //
        });    

        $(".more").click(function(){
            $(this).closest(".conditions").siblings().toggleClass("hide");
        });
    </script>
</body>
</html>